<!--
 * @Description: 
 * @Author: xuzp4
 * @Date: 2022-03-22 17:34:08
 * @LastEditors: xuzp4
 * @LastEditTime: 2022-04-06 16:39:34
 * @FilePath: \visitor_management\src\components\Toast.vue
-->
<template>
  <el-dialog
    class="toast-dialog"
    :visible="_visible"
    :title="title || $t('common.pwd_validate')"
    :append-to-body="true"
    width="520px"
    top="30vh"
    :before-close="cancel"
    :close-on-click-modal="false"
  >
    <div class="content d-flex jc-center ai-center">
      <el-form ref="form" :model="formData" inline @submit.native.prevent>
        <el-form-item :label="$t('common.curuser_pwd')">
          <PasswordInput
            @keyup.enter.native="confirm"
            v-model="formData.curuser_pwd"
          />
        </el-form-item>
      </el-form>
    </div>
    <div slot="footer" class="dialog-footer">
      <MyButton class="cancel" @click="cancel">{{
        $t("common.cancel")
      }}</MyButton>
      <MyButton class="confirm" @click="confirm">{{
        $t("common.confirm")
      }}</MyButton>
    </div>
  </el-dialog>
</template>

<script>
import PasswordInput from "@/components/input/Password.vue";
import MyButton from "@/components/Button";

export default {
  components: { PasswordInput, MyButton },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: "",
    },
  },
  computed: {
    _visible: {
      get() {
        return this.visible;
      },
      set(val) {
        this.$emit("update:visible", val);
      },
    },
  },
  watch: {
    _visible: {
      handler(val) {
        if (!val) {
          this.formData = {};
        }
      },
    },
  },
  data() {
    return {
      formData: {},
    };
  },
  methods: {
    confirm() {
      this.$emit("confirm", this.formData);
    },
    cancel() {
      this._visible = false;
      this.$emit("cancel");
      this.formData = {};
    },
  },
};
</script>
<style lang="less" scoped>
.toast-dialog {
  .content {
    width: 100%;
    /deep/ .el-form {
      width: 100%;
    }
  }
}
</style>
